html网页组织中DIV间距是遇到思空见贯构造排版，经过css花式完成差别场景的div之间间距布局，譬喻有div支配间距，凹凸结构div间距。布局间距也是门径多种，梗概使用margin外间距（外补白）名目，概略使用padding内间距（内补白）款式，也大约使用float浮动（div靠左、div靠右）花式完成。分歧场景决意差别css属性构造，紧要丰富div css结构斥地指点积聚，这里CSS5为人人简介这三种技俩机关办法。

遇到div间距运用途景

从上图看到接纳div构造摆布结构、高下结构的距离距离，均使用css构造。

摆布结构布局，一样平常我们采用float:left与float:right实现，控制设置好支配div分其他宽度，紧要寄望宽度要计较好。

1、直接看代码

2、效果截图

把持float和宽度完成左右div之间间隔20px

3、阐发小结：采取float浮动，完成两个div分袂靠左和靠右，也就是紧贴的阿谁DIV间距，假设这两个div宽度之和小于父级宽度（形成div并排），那么他们之间就会孕育发生间隙，要是他们宽度之和大于父级宽度，他们就会独有占一行错位。这里class=box的父级对象宽度为400px，子级class=left宽度为120px，子级class=right宽度为260px，这样400-120-260=20，这样就可人造两个div之间出产生了20px隔断。从而实现div隔断间距。

不论凹凸结构仍是左右结构紧贴的DIV之间间距，均笼统使用padding完成，无意偶尔重要注意是，摆布或高下隔绝距离的排版是甚么样条件，要是不有边框或后盾差距，要完成div间隔从而实现模式之间有隔绝距离，这个时候使用padding非常利便的。

1、代码

2、成效

css padding完成摆布、高下间距功效

3、综合小结：这里采取padding完成div间距排版，要求是构造div盒子间距完成形式之间间距，这个时辰根抵需要两个div之间不有边框，同时不有后台差距，虽然使用padding结构隔断功效理论上两个div是紧贴的，只是借用padding边框与形式之间补白间距，不有后援没有边框差距，完成div之间需求的间距效果。

比照padding配置间距，margin配置间距就无需思索div可否有边框，div之间是否后盾不一致，若何前提下均或许使用margin-left、margin-right、margin-top、margin-bottom完成需求间距。

1、div隔绝距离实例代码

2、margin div间距成绩

css margin完成div间距

3、阐发小结：一样平常div或其他元素之间间距使用margin外构造花式实现，早期浏览器对margin兼容欠安会孕育发生双倍值或削减一倍值成就，但现在支流阅读器均曾经支持，但也要掌握float与padding布局间距，前提应允还是削减对margin带值使用。使用margin:0 auto的兼容不受影响。

总结：不管甚么排版下决意什么CSS属性组织，终极照旧灵敏使用，以简两利便为主完成div之间间隔间距的组织要求。

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css-hack/c52683.shtml